<div class="container-fluid">
  <h1>Angular2 Schema Form Exemple<small><a href="https://github.com/godbasin/angular2-form-schame">[Github]</a></small></h1>
  <div class="row">
    <div class="col-md-6">
      <dynamic-form *ngIf="['Simple', 'WithValidation', 'AllFormComponents'].indexOf(schameType) > -1" [config]="formConfig" [(model)]="formModel"></dynamic-form>
      <dynamic-array *ngIf="schameType == 'Array'" [config]="listConfig" [(ngModel)]="listModel"></dynamic-array>
      <dynamic-list *ngIf="schameType == 'Array List'" [config]="listConfig" [(ngModel)]="listModel"></dynamic-list>
      <div>
        <label class="control-label">Model: </label>
        <pre *ngIf="['Array List', 'Array'].indexOf(schameType) == -1">{{formModel | json}}</pre>
        <pre *ngIf="['Array List', 'Array'].indexOf(schameType) > -1">{{listModel | json}}</pre>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Select Example</label>
        <select class="form-control" name="schameType" [(ngModel)]="schameType" (ngModelChange)="changeSchame()">
          <option>Simple</option>
          <option value="WithValidation">With Validation</option>
          <option value="AllFormComponents">All Form Components</option>
          <option>Array</option>
          <option>Array List</option>
        </select>
      </div>
      <div class="form-group">
        <label>Form</label>
        <div style="height: 600px;">
            <json-editor [(ngModel)]="jsonConfig" [isEdit]="true" (ngModelChange)="changeJSON($event)"></json-editor>            
        </div>
      </div>
    </div>
  </div>
</div>
